<template>
    <div style="max-width: 960px;margin: 0 auto;">
        <Header></Header>
        <el-container>
            <el-header>
                <div style="margin-left: 20px;margin-top: 20px;font-size: large;display: flex;align-items: center;"><i
                        class="el-icon-mobile"></i> 修改手机号
                </div>
            </el-header>
            <el-main>
                <el-form style="border-radius: 4px" :model="ruleForm" :rules="rules" ref="ruleForm"
                         class="demo-ruleForm">
                    <el-row>
                        <el-col :span="5">
                            <span style="display: block">上传营业执照（原件）：</span>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item style="float:left;display: block" prop="bakOrgPath">
                                <input type="file" id="uploadImage" @change="bakOrgPath">
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <span style="float: left;font-size: 12px"> (图片格式支持jpg，png，bmp,大小不得超过800*800)</span>
                        </el-col>
                        <el-col :span="6">
                            <span style="color:red;float: left;">*</span>
                        </el-col>
                        <el-col :span="24">
                        </el-col>
                        <el-col :span="5">
                            <span>
                                预览：
                            </span>
                        </el-col>
                        <el-col :span="19">
                        <span style="height: 150px">
                        <vue-preview :slides="slide1" class="preview" alt=""></vue-preview>
                        </span>
                        </el-col>
                        <el-col :span="24"> <!--隔行-->
                        </el-col>
                        <el-col :span="5">
                            <span style="display: block">上传法人证件（原件）：</span>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item style="float:left;display: block" prop="bakIdcardPath">
                                <input type="file" id="uploadImage2" @change="bakIdcardPath">
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <span style="float: left;font-size: 12px"> (图片格式支持jpg，png，bmp,大小不得超过800*800)</span>
                        </el-col>
                        <el-col :span="6">
                            <span style="color:red;float: left;">*</span>
                        </el-col>
                        <el-col :span="24">
                        </el-col>
                        <el-col :span="5">
                            <span>
                                预览：
                            </span>
                        </el-col>
                        <el-col :span="19">
                        <span style="height: 150px">
                        <vue-preview :slides="slide2" class="preview" alt=""></vue-preview>
                        </span>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="5">
                            <div class="grid-content bg-purple">
                                <span>手机号：</span>
                            </div>
                        </el-col>
                        <el-col :span="9">
                            <div class="grid-content bg-purple-light">
                                <el-form-item style="" prop="mobile">
                                    <el-input type="text" placeholder="请输入新手机号" v-model="ruleForm.mobile"
                                              style="align-items: right;display: inline-block"/>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="1">
                            <div class="grid-content bg-purple">
                                <span style="color:red;">*</span>
                            </div>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="5">
                            <div class="grid-content bg-purple">
                                <span>验证码：</span>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple-light">
                                <el-form-item style="" prop="authCode">
                                    <el-input type="text" placeholder="请输入验证码" v-model="ruleForm.authCode"
                                              style="align-items: right;display: inline-block"/>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="0.5">
                            <div class="grid-content bg-purple">
                                <span style="color: aliceblue">*</span>
                            </div>
                        </el-col>
                        <el-col :span="8" style="text-align: left;">
                            <div class="grid-content bg-purple">
                    <span v-show="!show" class="count"><span
                            style="color: red">{{count}}</span> 秒后可以重新发送</span>
                                <button type="button" v-show="show" v-on:click="getCode">发送验证码</button>
                            </div>
                        </el-col>
                    </el-row>
                    <div style="margin-right: 300px">
                        <!-- `checked` 为 true 或 false -->
                        <el-checkbox v-model="checked" label=" "/>
                        <div style="display: inline-block;">
                            我已阅读并同意《<a href="/" style=" display: inline-block;color: #409EFF;">企业标准信息公共服务平台服务条款</a>》
                        </div>
                    </div>
                    <el-form-item>
                        <el-button style="margin-top: 20px;width: 100px;margin-right: 100px" type="primary"
                                   @click="onSubmit('ruleForm')">确定
                        </el-button>
                    </el-form-item>
                </el-form>

            </el-main>
        </el-container>
    </div>
</template>

<script>
    import Header from "../../../components/Header";
    import {setEmailCodeBefore, SMSValid, updateMobile} from '../../../api/userMG'

    export default {
        name: "mobile",
        components: {
            Header
        },
        data() {

            return {
                show: true,
                count: '',
                timer: null,
                checked: false,
                images: '',
                slide1: [],
                slide2: [],
                ruleForm: {
                    mobile: '',
                    authCode: '',
                    bakOrgPath:'',
                    bakIdcardPath:''
                },
                rules: {
                    mobile: [
                        {required: true, message: '请输入手机号', trigger: 'blur'},
                        {min: 11, max: 11, message: '手机号格式不正确', trigger: 'blur'}
                    ],
                    authCode: [
                        {required: true, message: '请输入验证码', trigger: 'blur'}
                    ],
                    bakOrgPath: [
                        {required: true, message: '请上传营业执照原件', trigger: 'blur'}
                    ],
                    bakIdcardPath: [
                        {required: true, message: '请上传法人身份证原件', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {

            onSubmit(ruleForm) {
                const _this = this;
                this.$refs[ruleForm].validate((valid) => {
                    if (valid) {
                        let updateInfo = {
                            bakId: window.localStorage.orgId,
                            bakMobile: _this.ruleForm.mobile,
                            bakIdcardPath: window.localStorage.bakIdcardPath,
                            bakOrgPath: window.localStorage.bakOrgPath
                        };
                        if (this.checked === false) {
                            _this.$message.error("请仔细阅读企业标准信息公共服务平台服务条款");
                            return false;
                        }

                        SMSValid(_this.ruleForm.authCode).then(res => {
                            if (res.code === 200) { // 动态验证码验证成功
                                updateMobile(updateInfo).then(res => {
                                    if(res.code === 200) {
                                        _this.$router.push("SuccessMobile")
                                    }
                                })
                            }
                        });
                    }
                    else {
                        _this.$message.error('提交失败，请核实格式要求是否正确')
                    }
                })
            },
            // 生成验证码
            getCode() {
                const TIME_COUNT = 60;
                if (!this.timer) {
                    this.count = TIME_COUNT;
                    this.show = false;
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= TIME_COUNT) {
                            this.count--;
                        } else {
                            this.show = true;
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                    }, 1000)
                }
                setEmailCodeBefore();// 生成验证码
            },
            // 生成路径
            bakOrgPath: function (e) {
                console.log("调用开始==============>", e);
                let file = e.target.files[0];
                console.log("原始file==========>", file);
                const fd = new FormData();// 否则后端报错400
                fd.append('file', file);
                console.log("FormData后的file==============>", fd);
                const config = {headers: {'Content-Type': 'multipart/form-data'}};
                this.$axios.post('/api/v1/excel/uploadPic', fd, config
                ).then(res => {
                    window.localStorage.bakOrgPath = res.data.data;
                    this.ruleForm.bakOrgPath = res.data.data;
                    console.log("window.localStorage.bakOrgPath", window.localStorage.bakOrgPath);
                    this.show = true;
                    let temp = {
                        src: "http://localhost:8082/" + res.data.data,
                        msrc: "http://localhost:8082/" + res.data.data,
                        w: 1200,// 大图宽
                        h: 900
                    };
                    this.slide1 = [temp];
                    console.log("this.slide1", this.slide1)
                    this.$message.success("上传成功");
                });
            },
            bakIdcardPath: function (e) {
                console.log("调用开始==============>", e);
                let file = e.target.files[0];
                console.log("原始file==========>", file);
                const fd = new FormData();// 否则后端报错400
                fd.append('file', file);
                console.log("FormData后的file==============>", fd);
                const config = {headers: {'Content-Type': 'multipart/form-data'}};
                this.$axios.post('/api/v1/excel/uploadPic', fd, config
                ).then(res => {
                    window.localStorage.bakIdcardPath = res.data.data;
                    this.ruleForm.bakIdcardPath = res.data.data;
                    console.log("window.localStorage.bakIdcardPath", window.localStorage.bakIdcardPath);
                    this.show = true;
                    let temp = {
                        src: "http://localhost:8082/" + res.data.data,
                        msrc: "http://localhost:8082/" + res.data.data,
                        w: 1200,// 大图宽
                        h: 900
                    };
                    this.slide2 = [temp];
                    console.log("this.slide2", this.slide2);
                    this.$message.success("上传成功");
                });
            },
        }
    }
</script>

<style scoped>

    .el-main {
        background-color: #FFFFFF;
        line-height: 45px;
        text-align: center;
        font-size: 14px;
    }

    .el-icon-mobile:before {
        font-size: 40px;
    }

</style>